<!DOCTYPE html>
<html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AutoDepGraph DAG</title>
    <style type="text/css" media="screen">
        body { background:#eee; margin:1em; text-align:center; }
        canvas { display:block; margin:1em auto; background:#fff; border:1px solid #ccc }
    </style>

    <script type="text/JavaScript">
        var url = "adg_graph.svg"; //url to load image from
        var refreshInterval = 500; //in ms
        var drawDate = true; //draw date string
        var img;
        function init() {
            var rel_canvas = document.getElementById("rel_canvas");
            var context = rel_canvas.getContext("2d");
            img = new Image();
            img.onload = function() {
                rel_canvas.setAttribute("width", img.width)
                rel_canvas.setAttribute("height", img.height+10)

                context.drawImage(this, 0, 0);
                if(drawDate) {
                    var now = new Date();
                    var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
                    var maxWidth = 100;
                    var x = img.width-10-maxWidth;
                    var y = img.height+5;
                    context.strokeStyle = 'black';
                    context.strokeText(text, x, y, maxWidth);
                }
            };
            refresh();
        }
        function refresh()
        {
            img.src = url + "?t=" + new Date().getTime();
            setTimeout("refresh()",refreshInterval);
        }
    </script>
</head>

<body onload="JavaScript:init();">
<h1>AutoDepGraph DAG</h1>

<body onload="JavaScript:init();">
<canvas id="canvas", width="800" height="600"></canvas>
</body>


<script type="text/javascript" charset="utf-8">
var canvas = document.getElementById("canvas");
canvas.width = 1200; canvas.height = 800;
var img = new Image;
img.src = 'adg_graph.svg';
var drawDate = true;
window.onload = function(){
    var ctx = canvas.getContext('2d');
    trackTransforms(ctx);
    var refreshInterval = 500; //in ms

    ctx.drawImage(img, 0, 0);

    function redraw(){
        // Clear the entire canvas
        var p1 = ctx.transformedPoint(0,0);
        var p2 = ctx.transformedPoint(canvas.width,canvas.height);
        ctx.clearRect(p1.x, p1.y, p2.x-p1.x, p2.y-p1.y);
        ctx.drawImage(img, 0, 0);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var maxWidth = 100;
            var x = 10;
            var y = 15;
            ctx.fillText(text, x, y);
        }
    }
    redraw();
    img.onload = function() {
        ctx.drawImage(this, 0, 0);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var x = 10;
            var y = 15;
            ctx.fillText(text, x, y);
            console.log(text)
        }
    };
    function refresh()
    {
        img.src = url + "?t=" + new Date().getTime();
        setTimeout("refresh()",refreshInterval);
    }
    refresh()

    var lastX=canvas.width/2, lastY=canvas.height/2;
    var dragStart,dragged;
    canvas.addEventListener('mousedown',function(evt){
        document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragStart = ctx.transformedPoint(lastX,lastY);
        dragged = false;
    },false);
    canvas.addEventListener('mousemove',function(evt){
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragged = true;
        if (dragStart){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
            redraw();
        }
    },false);
    canvas.addEventListener('mouseup',function(evt){
        dragStart = null;
        if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
    },false);

    var scaleFactor = 1.1;
    var zoom = function(clicks){
        var pt = ctx.transformedPoint(lastX,lastY);
        ctx.translate(pt.x,pt.y);
        var factor = Math.pow(scaleFactor, clicks);
        ctx.scale(factor,factor);
        ctx.translate(-pt.x,-pt.y);
        redraw();
    }

    var handleScroll = function(evt){
        var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
        if (delta) zoom(delta);
        return evt.preventDefault() && false;
    };
    canvas.addEventListener('DOMMouseScroll',handleScroll,false);
    canvas.addEventListener('mousewheel',handleScroll,false);
};



function trackTransforms(ctx){
    var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
    var xform = svg.createSVGMatrix();
    ctx.getTransform = function(){ return xform; };

    var savedTransforms = [];
    var save = ctx.save;
    ctx.save = function(){
        savedTransforms.push(xform.translate(0,0));
        return save.call(ctx);
    };
    var restore = ctx.restore;
    ctx.restore = function(){
        xform = savedTransforms.pop();
        return restore.call(ctx);
    };

    var scale = ctx.scale;
    ctx.scale = function(sx,sy){
        xform = xform.scaleNonUniform(sx,sy);
        return scale.call(ctx,sx,sy);
    };
    var rotate = ctx.rotate;
    ctx.rotate = function(radians){
        xform = xform.rotate(radians*180/Math.PI);
        return rotate.call(ctx,radians);
    };
    var translate = ctx.translate;
    ctx.translate = function(dx,dy){
        xform = xform.translate(dx,dy);
        return translate.call(ctx,dx,dy);
    };
    var transform = ctx.transform;
    ctx.transform = function(a,b,c,d,e,f){
        var m2 = svg.createSVGMatrix();
        m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
        xform = xform.multiply(m2);
        return transform.call(ctx,a,b,c,d,e,f);
    };
    var setTransform = ctx.setTransform;
    ctx.setTransform = function(a,b,c,d,e,f){
        xform.a = a;
        xform.b = b;
        xform.c = c;
        xform.d = d;
        xform.e = e;
        xform.f = f;
        return setTransform.call(ctx,a,b,c,d,e,f);
    };
    var pt  = svg.createSVGPoint();
    ctx.transformedPoint = function(x,y){
        pt.x=x; pt.y=y;
        return pt.matrixTransform(xform.inverse());
    }

}

</script>
</body>
</html>
